<template>
    <!-- 新增或修改应用更新信息的组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'500px'">
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="100px">
            <el-form-item label="版本号" prop="version">
                <el-input :maxLength="10" v-model="formData.version" placeholder="eg:1.0.0" />
            </el-form-item>
            <el-form-item label="更新方式" prop="methodType">
                <el-radio-group v-model="formData.methodType">
                    <el-radio value="FILE">本地文件</el-radio>
                    <el-radio value="OUTER_LINK">外链</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="文件" prop="fileName" class="file-select"
                v-if="formData.methodType == 0 || formData.methodType == 'FILE'">
                <div class="file-name">{{ formData.fileName }}</div>
                <el-upload name="file" :show-file-list="false" accept=".exe" :multiple="false"
                    :http-request="selectFile">
                    <el-button type="primary" size="small">选择文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="外链地址" prop="outerLink"
                v-if="formData.methodType == 1 || formData.methodType == 'OUTER_LINK'">
                <el-input :maxLength="200" v-model="formData.outerLink" placeholder="请输入完整的外链地址" />
            </el-form-item>
            <el-form-item label="更新内容" class="update-form-item">
                <div class="update-desc-item" v-for="(item, index) in formData.descriptionList" :key="index">
                    <el-form-item :prop="'descriptionList.' + index + '.title'"
                        :rules="{ required: true, message: '更新内容不能为空' }">
                        <div class="update-desc">
                            <div class="num">{{ index + 1 }}</div>
                            <div class="input">
                                <el-input :maxLength="11" v-model="item.title" placeholder="请输入更新内容"
                                    @keydown.tab="addLine" @keydown.enter="submitData" />
                            </div>
                            <div class="iconfont icon-tianjia-" v-if="index == 0" @click="addLine">
                            </div>
                            <div class="iconfont icon-shanchu2-L" v-if="index > 0" @click="delLie(index)"></div>
                        </div>
                    </el-form-item>
                </div>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "发布更新",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});

const validateVersion = (rule, value, callback) => {
    if (!proxy.Verify.checkVersion(value)) {
        callback(new Error('请输入正确的版本号'))
    }
    else {
        callback();
    }
}

const formData = ref({ descriptionList: [] })
const formDataRef = ref()
const rules = {
    version: [
        { required: true, message: '请输入版本号' },
        { validator: validateVersion, message: '请输入正确的版本号' }
    ],
    methodType: [{ required: true, message: '请选择文件类型' }],
    fileName: [{ required: true, message: '请选择更新文件' }],
    outerLink: [{ required: true, message: '请输入外链地址' }],
    updateType: [{ required: true, message: '请选择更新类型' }]
}

const selectFile = (file) => {
    file = file.file;
    formData.value.file = file;
    formData.value.fileName = file.name;
}

const addLine = () => {
    formData.value.descriptionList.push({ title: '' });
}

const delLie = (index) => {
    formData.value.descriptionList.splice(index, 1);
}

const emit = defineEmits(["reload"])
const submitData = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {}
        Object.assign(params, formData.value)
        params.description = params.descriptionList.map((item) => item.title).join('|')
        let result = await proxy.Request({
            method: 'post',
            url: proxy.Api.saveUpdate,
            params
        })
        if (!result) {
            return
        }
        proxy.Message.success('操作成功')
        dialogConfig.show = false
        emit('reload')
    })
}

const show = (data) => {
    dialogConfig.show = true
    nextTick(() => {
        formDataRef.value.resetFields()
        if (data.descriptionList) {
            data.descriptionList = data.descriptionList.map((item) => {
                return { title: item }
            })
            data.fileName = 'R-Chat' + data.version + '.exe'
        } else {
            data.descriptionList = [{ title: '' }]
        }
        formData.value = Object.assign({}, data)
    })
}
defineExpose({
    show,
});
</script>

<style lang="scss" scoped>
.file-select {
    display: flex;

    .file-name {
        color: #409eff;
        margin-right: 10px;
    }
}

.update-form-item {
    margin-bottom: 0px;

    .update-desc-item {
        width: 100%;
        margin-bottom: 15px;

        .update-desc {
            width: 100%;
            display: flex;

            .num {
                width: 15px;
                margin-right: 2px;
            }

            .input {
                flex: 1;
            }

            .iconfont {
                cursor: pointer;
                margin-left: 10px;
                text-align: right;
            }
        }
    }
}
</style>
